import React, { Component } from 'react';
import { Button, Modal, Form, Drawer } from 'antd';
import '@/assets/css/settings';
import { BasicLayout, BasicLayoutSearch } from '../../components/BasicLayout';
import { BasicPagination, compareNum, TableCustomize } from '../../components/TableCustomize'
import { withPermission } from '../../components/withpermission';
import SearchForm from './SearchForm';
import AddForm from './AddForm';
import ProductionForm from './ProductionForm';
const CreateButton = withPermission(Button, 'create')
class Demo extends Component {
	state = {
		dataSource: [
			{
				"number": 1,
				"id": 1,
				"parentId": null,
				"name": "系统管理",
				"address": "/系统saaaaaaaaddddddddddddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss管理",
				"icon": "home",
				"sort": 2,
				"hierarchy": 1,
				"sysMenuButtonList": [],
			},
		],
		visible: false,
		advanced: false,
		searchItem: {},
		modalTitle: '新增',
		formData: {},
		drawerVisible: false,
		drawerVisible1: false,
		drawerTitle: '新增',
		pageSize: 10,
		pageNum: 1,
		total: 40,
		columns: [
			{
				title: '序号',
				dataIndex: 'id',
				width: 200,
				render: (text, record, index) => `${index + 1}`,
			},

			{
				title: '菜单名称',
				width: 200,
				dataIndex: 'name',
				editable: true
			},
			{
				title: '访问地址',
				width: 200,
				// allowEllipsis: true,
				dataIndex: 'address',
			},
			{
				title: '排序',
				width: 200,
				dataIndex: 'sort',
				sorter: (a, b) => compareNum(a.sort, b.sort)
			},
			{
				title: '操作',
				// width: 200,
				dataIndex: 'opts',
			}
		],
	};
	componentDidMount() {
		this.fetch();
	}
	//初始化加载数据
	fetch = (page = 1, size = 10) => {
		this.setState({ loading: true })
		setTimeout(() => {
			this.setState({ loading: false })
			// openSuccessModal('success')
			// openModalMessage('warning','警告')
			// openModalMessage('warning','警告')
		}, 100);
	}
	//添加修改菜单提交
	submitMenu = () => {
		this.formAdd.validateFields((err, value) => {
			if (err) return;
			console.log(value)
		})
	}
	onHandleOk = () => {
		this.formDrawer.validateFields((err, value) => {
			if (err) return;
			console.log(value)
		})
	}
	onHandleOk1 = () => {
		this.formDrawer1.validateFields((err, value) => {
			if (err) return;
			console.log(value)
		})
	}
	//0新增  1修改
	create = () => {
		this.setState({
			visible: true,
		});

	};
	showDrawer = () => {
		this.setState({
			drawerVisible: true,
		});
	}
	showDrawer1 = () => {
		this.setState({
			drawerVisible1: true,
		});
	}

	handleCancel = e => {
		this.formAdd && this.formAdd.resetFields();
		this.formDrawer && this.formDrawer.resetFields();
		this.formDrawer1 && this.formDrawer1.resetFields();
		this.setState({
			visible: false,
			btnDrawer: false,
			drawerVisible: false,
			drawerVisible1: false,
		});
	};


	handleSearch = value => {
		console.log(value)
		this.setState({ searchItem: value });
	};

	onHandleAdvanced = () => {
		this.setState({ advanced: !this.state.advanced })
	}
	loadData = (value, dataSource) => {
		console.log(value, dataSource)
	}
	render() {
		const { loading, dataSource, formData, visible, modalTitle, drawerVisible, drawerTitle, drawerVisible1, advanced, columns, pageNum, pageSize, total } = this.state;
		return (
			<div>

				<BasicLayoutSearch>
					<SearchForm onSearch={this.handleSearch}
						onClick={this.onHandleAdvanced}
						advanced={advanced} />
				</BasicLayoutSearch>
				<BasicLayout buttons={[<Button key={1} onClick={this.create}>弹出模态框</Button>, <Button key={2} onClick={this.showDrawer}>弹出抽屉</Button>, <Button key={3} onClick={this.showDrawer1}>弹出抽屉1</Button>, <CreateButton key={4} />]} name="管理端" icon="table">
					<TableCustomize columns={columns} rowKey={(record) => record.id} dataSource={dataSource} pagination={false} loading={loading} allowDrafting={true} allowRowEdit allowEditable={this.loadData} />
					<BasicPagination pageNum={pageNum} pageSize={pageSize} total={total} loadData={this.fetch} />
				</BasicLayout>

				<Modal
					visible={visible}
					destroyOnClose
					title={modalTitle}
					onOk={this.submitMenu}
					onCancel={this.handleCancel}
					okText="保存"
					cancelText="取消"
				>
					<AddForm
						ref={node => (this.formAdd = node)}
						formData={formData}
					/>
				</Modal>

				<Drawer width={400} visible={drawerVisible} title={drawerTitle} onClose={this.handleCancel}>
					<AddForm
						formData={formData}
						onOk={this.onHandleOk}
						ref={node => (this.formDrawer = node)}
						onClose={this.handleCancel}
					/>
					<div
						style={{
							position: 'absolute',
							right: 0,
							bottom: 0,
							width: '100%',
							borderTop: '1px solid #e9e9e9',
							padding: '10px 16px',
							background: '#fff',
							textAlign: 'right',
						}}
					>
						<Button onClick={this.handleCancel} style={{ marginRight: 10 }}>{'取消'}</Button>
						<Button type="primary" onClick={this.onHandleOk}>
							{'确认'}
						</Button>
					</div>

				</Drawer>

				<Drawer width={760} visible={drawerVisible1} title={drawerTitle} onClose={this.handleCancel}>
					<ProductionForm
						formData={formData}
						onOk={this.onHandleOk1}
						ref={node => (this.formDrawer1 = node)}
						onClose={this.handleCancel}
					/>
					<div
						style={{
							position: 'absolute',
							right: 0,
							bottom: 0,
							width: '100%',
							borderTop: '1px solid #e9e9e9',
							padding: '10px 16px',
							background: '#fff',
							textAlign: 'right',
						}}
					>
						<Button onClick={this.handleCancel} style={{ marginRight: 10 }}>{'取消'}</Button>
						<Button type="primary" onClick={this.onHandleOk}>
							{'确认'}
						</Button>
					</div>

				</Drawer>
			</div>
		);
	}
}
export default Form.create()(Demo);